<template>
    <div class="header">
        <div class="search">
            <span>{{msg}} <i class="iconfont icon-xiangxia"></i> </span>
            <div class="input">
                <i class="iconfont icon-fangdajing"></i>
                <input type="text" placeholder="毕业旅行推荐">
            </div>
            <span class="iconfont icon-gengduo-2"></span>
        </div>
        <swiper :options="swiperOption">
    <!-- slides -->
    <swiper-slide><img src="~img/2.jpg"></swiper-slide>
    <swiper-slide><img src="~img/11.jpg"></swiper-slide>
    <swiper-slide><img src="~img/12.jpg"></swiper-slide>
    <swiper-slide><img src="~img/13.jpg"></swiper-slide>
    <swiper-slide><img src="~img/14.jpg"></swiper-slide>
    <swiper-slide><img src="~img/15.jpg"></swiper-slide>
    <swiper-slide><img src="~img/28.jpg"></swiper-slide>
    <!-- Optional controls -->
    <div class="swiper-pagination"  slot="pagination"></div>
    
  </swiper>
    </div>
</template>
<script>

export default {

     props:["msg"],
   data(){
       return{
        swiperOption: {
            autoplay:true,
            speed:1000,
         pagination: {
            el: '.swiper-pagination'
          }
        },
      }
        
   },


}
</script>
<style scoped lang="scss">
@function pxTwo($font){
    @return $font*2.6666666666
}

.header{
    width: 100%;
    height: pxTwo(2rem);
    position: relative;
    img{
        width: 100%;
        height: 100%;
    }
.swiper {
    width: 100%;
  }
    .search{
        width: 100%;
        height: pxTwo(.4rem);
        background:rgba(0,0,0,.3);
        display: flex;
        justify-content: space-around;
        align-items: center;
        font-size: 14px;
        position: absolute;
        left:0;
        top:0;
        z-index: 9;
        color:#fff;
        i{
            display: inline-block;
        }
        .input{
            width: 60%;
            height: 80%;
            border-radius: 12px;
            background: #fff;
            display: flex;
            align-items: center;
            margin-left: pxTwo(.1rem);
            overflow: hidden;
            i{
                margin-left: pxTwo(.1rem);
            }
            input{
                width: 80%;
                height: 100%;
                border: 0;
            }
            span{
                font-size: 18px;
            }
        }
    }
}
</style>

